<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/5/18
  Time: 9:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui css样式--%>
    <link rel="stylesheet" href="/css/index.css">
    <%--引入elementui js组件 js的引入必须放在vue引入的下方--%>
    <script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
  <div id="app">
      <div class="login_container">
          <!-- 登录盒子  -->
          <div class="login_box">
              <!-- 头像 -->
              <div class="avatar_box">
                  <img src="/images/s5a2674f6df585.png" alt="">
              </div>
              <!-- 登录表单 -->
              <el-form :model="loginForm" ref="loginFormRef" :rules="loginRule" label-width="0px" class="login_form">
                  <!-- 用户名 -->
                  <el-form-item prop="username">
                      <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
                  </el-form-item>
                  <!-- 密码 -->
                  <el-form-item prop="password">
                      <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                  </el-form-item>
                  <!-- 按钮 -->
                  <el-form-item class="btns">
                      <el-button type="primary" @click="login">登录</el-button>
                      <el-button type="info" >重置</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </div>
  </div>
</body>
<script>
     let app=new Vue({
          el:"#app",
          data:{
              loginForm:{},
              //校验规则
              loginRule:{
                  username:[
                      { required: true, message: '请输入账号', trigger: 'blur' },
                  ],
                  password:[
                      { required: true, message: '请输入密码', trigger: 'blur' },
                  ]
              }
          },
          methods:{
               login(){
                   var that=this;
                    this.$refs.loginFormRef.validate((valid)=>{
                         if(valid){
                             axios.post("/login",this.loginForm).then(function(result){
                                    if(result.data.code==200){
                                        //登录成功
                                        that.$message.success(result.data.msg);
                                        //跳转到管理主页面
                                        location.href="/admin/main.jsp"
                                    }else{
                                        that.$message.error(result.data.msg);
                                    }
                             })
                         }
                    })
               }
          }
     })
</script>

<style>
    html,body,#app{
        margin-right: 0px;
        padding: 0px;
    }
    .login_container {
        background: url("/images/denglu.jpg") no-repeat white center;
        height: 100%;
    }
    .login_box {
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .login_box>.avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;

    }
    .login_box>.avatar_box>img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>
</html>

















